<template>
  <div class="page-container" style="padding-bottom: 0px">
    <div
      class="page-form-bg"
      style="overflow: auto"
      :style="{
        height: isShowTools ? 'calc(100vh - 295px)' : 'calc(100vh - 205px)',
      }"
    >
      <el-form
        ref="form"
        class="query-more-form"
        size="mini"
        label-width="85px"
        :model="form"
        :rules="rules"
      >
        <el-row>
          <el-col :span="16">
            <el-col :span="24">
              <div class="page-form-title page_form_title">
                <span class="label">案件详情</span>
                <span class="caseNumber">
                  案件编号:{{ form.code }}
                  <span class="caseNumberSon" v-show="form.mergeCaseCode">
                    【{{ form.mergeCaseCode }}】
                  </span>
                </span>
                <div v-if="form.handleSatisfaction >= 1">
                  <span>办理满意度</span>
                  <img
                    src="@/assets/images/images1/icon15.png"
                    alt=""
                    v-if="form.handleSatisfaction >= 1"
                  />
                  <img src="@/assets/images/images1/icon19.png" alt="" v-else />
                  <img
                    src="@/assets/images/images1/icon15.png"
                    alt=""
                    v-if="form.handleSatisfaction >= 2"
                  />
                  <img src="@/assets/images/images1/icon19.png" alt="" v-else />
                  <img
                    src="@/assets/images/images1/icon15.png"
                    alt=""
                    v-if="form.handleSatisfaction >= 3"
                  />
                  <img src="@/assets/images/images1/icon19.png" alt="" v-else />
                  <img
                    src="@/assets/images/images1/icon15.png"
                    alt=""
                    v-if="form.handleSatisfaction >= 4"
                  />
                  <img src="@/assets/images/images1/icon19.png" alt="" v-else />
                  <img
                    src="@/assets/images/images1/icon15.png"
                    alt=""
                    v-if="form.handleSatisfaction >= 5"
                  />
                  <img src="@/assets/images/images1/icon19.png" alt="" v-else />
                </div>
                <!-- <span></span> -->
              </div>
            </el-col>
            <el-col :span="24" style="padding: 20px">
              <!-- row1 -->
              <el-row :gutter="20">
                <el-col :span="6"
                  ><el-form-item
                    label="来电号码"
                    class="reportTel"
                    prop="reportTel"
                    ><el-input
                      v-model="form.reportTel"
                      placeholder="请输入来电号码"
                      :disabled="isdisabled"
                      maxlength="255" /></el-form-item
                ></el-col>
                <el-col :span="6"
                  ><el-form-item label="姓名" prop="reportName"
                    ><el-input
                      v-model="form.reportName"
                      :disabled="isdisabled"
                      placeholder="请输入姓名"
                      maxlength="255" /></el-form-item
                ></el-col>
                <el-col :span="6"
                  ><el-form-item label="性别" prop="reportGender">
                    <el-select
                      :disabled="isdisabled"
                      v-model="form.reportGender"
                      placeholder="请选择性别"
                    >
                      <el-option
                        v-for="item in genderArr"
                        :key="item.value"
                        :value="item.value"
                        :label="item.label"
                      />
                    </el-select> </el-form-item
                ></el-col>
                <el-col :span="6"
                  ><el-button
                    size="mini"
                    class="submit-btn"
                    @click="historyWorkOrder"
                    >历史工单</el-button
                  ></el-col
                >
              </el-row>

              <!-- row2 -->
              <el-row :gutter="20">
                <el-col :span="6"
                  ><el-form-item label="来源类型" prop="sourceName">
                    <el-select
                      v-model="form.sourceName"
                      :disabled="isdisabled"
                      class="w-100"
                      placeholder="请输入来源类型"
                    >
                      <el-option
                        v-for="item in sourceTypeArr"
                        :key="item.id"
                        :value="item.code"
                        :label="item.value"
                      />
                    </el-select> </el-form-item
                ></el-col>
                <el-col :span="6"
                  ><el-form-item label="诉求类型" prop="type">
                    <el-select
                      class="w-100"
                      v-model="form.type"
                      :disabled="isdisabled"
                      placeholder="请选择诉求类型"
                    >
                      <el-option
                        v-for="item in appealTypeArr"
                        :key="item.id"
                        :value="item.value"
                        :label="item.value"
                      />
                    </el-select> </el-form-item
                ></el-col>
                <el-col :span="6"
                  ><el-form-item label="紧急级别" prop="level">
                    <el-select v-model="form.level" :disabled="isdisabled">
                      <el-option
                        v-for="item in levelArr"
                        :key="item.id"
                        :value="item.id"
                        :label="item.value"
                      /> </el-select></el-form-item
                ></el-col>
                <el-col :span="6"
                  ><el-form-item label="是否保密" prop="secrecy">
                    <el-select
                      class="w-100"
                      :disabled="isdisabled"
                      v-model="form.secrecy"
                      placeholder="请选择是否保密"
                    >
                      <el-option
                        v-for="item in secrecyArr"
                        :key="item.id"
                        :value="item.id"
                        :label="item.type"
                      />
                    </el-select> </el-form-item
                ></el-col>
              </el-row>

              <!-- row3 -->
              <el-row :gutter="20">
                <el-col :span="6"
                  ><el-form-item label="区/市/县">
                    <el-select
                      class="w-100"
                      v-model="form.addressCityName"
                      :disabled="isdisabled"
                      placeholder="请选择区/市/县"
                      @change="changeRessStreet"
                    >
                      <el-option
                        v-for="item in addressCityArr"
                        :key="item.id"
                        :value="item.id"
                        :label="item.name"
                      />
                    </el-select> </el-form-item
                ></el-col>
                <el-col :span="6"
                  ><el-form-item label="街道/乡镇">
                    <el-select
                      class="w-100"
                      v-model="form.addressStreetName"
                      :disabled="isdisabled"
                      placeholder="请选择街道/乡镇"
                      @change="changeDetailedUser"
                    >
                      <el-option
                        v-for="item in addressStreetArr"
                        :key="item.id"
                        :value="item.id"
                        :label="item.name"
                      />
                    </el-select> </el-form-item
                ></el-col>
                <el-col :span="6"
                  ><el-form-item label="社区/村">
                    <el-select
                      class="w-100"
                      :disabled="isdisabled"
                      v-model="form.addressCommunityName"
                      placeholder="请选择社区/村"
                    >
                      <el-option
                        v-for="item in addressDetailedUserArr"
                        :key="item.id"
                        :value="item.id"
                        :label="item.name"
                      /> </el-select></el-form-item
                ></el-col>
                <el-col :span="6"
                  ><el-form-item label="风险预警"
                    ><el-input
                      :disabled="isdisabled"
                      v-model="form.riskMessage"
                      placeholder="请输入风险预警"
                      maxlength="255" /></el-form-item
                ></el-col>
              </el-row>

              <!-- row4 -->
              <el-row :gutter="20">
                <el-col :span="24"
                  ><el-form-item label="位置" prop="addressDetailedStandard"
                    ><el-input
                      clearable
                      :disabled="isdisabled"
                      v-model="form.addressDetailedStandard"
                      @blur="sureBtn"
                      @keyup.enter="sureBtn"
                      placeholder="请输入位置"
                      maxlength="255" /></el-form-item
                ></el-col>

                <el-col :span="24"
                  ><el-form-item label="标签集">
                    <el-input
                      :disabled="islabelsDisabled"
                      v-model="form.labels"
                      placeholder="请输入标签集"
                      @focus="changeCaseLable"
                      maxlength="255"
                    /> </el-form-item
                ></el-col>
                <el-col :span="24"
                  ><el-form-item label="权责清单" prop="categoryCompleteName"
                    ><el-input
                      :disabled="isdisabled"
                      v-model="form.categoryCompleteName"
                      @focus="openThreeType"
                      placeholder="请输入权责清单"
                      maxlength="255" /></el-form-item
                ></el-col>

                <el-col :span="24"
                  ><el-form-item label="工单标题" prop="title"
                    ><el-input
                      :disabled="isdisabled"
                      v-model="form.title"
                      placeholder="请输入工单标题"
                      maxlength="255" /></el-form-item
                ></el-col>

                <el-col :span="24"
                  ><el-form-item
                    label="诉求内容"
                    class="appealContent"
                    prop="content"
                    ><el-input
                      type="textarea"
                      :rows="6"
                      :disabled="isdisabled"
                      v-model="form.content"
                      placeholder="请输入诉求内容"
                      maxlength="255" /></el-form-item
                ></el-col>
              </el-row>

              <!-- row5 -->
              <el-row :gutter="20" class="imgBox">
                <el-col :span="24">
                  <div class="enclosureShow">
                    <span class="enclosureShowSpan">附件展示</span>
                    <el-button
                      type="primary"
                      @click="addEnclosure"
                      v-if="
                        this.$route.params.path == '/waitDispatchOrder/index'
                      "
                      >添加附件</el-button
                    >
                  </div>
                  <div class="showImage" v-if="this.imageDataArr.length > 0">
                    <div
                      class="showImageItem"
                      v-for="(item, i) in imageDataArr"
                      :key="i"
                      @click="imageBig(item.url)"
                    >
                      <img :src="item.url" alt="" class="showImg" />
                      <div class="showName">{{ item.name }}</div>
                      <div class="imgIcon" @click.stop="delImg(i)">删除</div>
                    </div>
                  </div>
                  <div class="fileDownload" v-if="this.fileArr.length > 0">
                    <div class="dot"></div>
                    <div class="imageWords">文件下载</div>
                    <div
                      class="fileNameBox"
                      v-for="(item, i) in fileArr"
                      :key="i"
                    >
                      <a
                        class="fileName"
                        :href="item.url"
                        :download="item.name"
                        target="_blank"
                      >
                        {{ item.name }}
                      </a>
                      <i
                        class="el-icon-delete fileIcon"
                        @click.stop="delFile(i)"
                      ></i>
                    </div>
                  </div>
                </el-col>
              </el-row>
            </el-col>
          </el-col>

          <el-col :span="8" style="padding: 10px 5px 10px 20px">
            <!-- 地图 -->
            <SearchPanel @change="handleSearchPanelChange">
              <div class="map-panel mb-20">
                <div id="map" ref="map" />
              </div>
            </SearchPanel>

            <!-- <div class="steps-panel of-auto">
              <div class="steps-title" />
              <div class="steps-content">
                <el-steps class="custom-steps" direction="vertical" :active="1">
                  <el-step
                    v-for="(item, index) in taskHistoryList"
                    :key="index"
                  >
                    <template slot="icon">
                      <span
                        class="status"
                        :class="index === 0 ? 'color-1' : ''"
                      />
                    </template>
                    <template slot="title">
                      <div class="title">
                        {{ item.nodeName }}
                        <img
                          v-show="item.overtimeFlag === 0"
                          :src="case1"
                          class="w-60 h-15"
                          alt=""
                        />
                        <img
                          v-show="item.overtimeFlag === 1"
                          :src="case1"
                          class="w-60 h-15"
                          alt=""
                        />
                      </div>
                      <div class="time fs-12">
                        {{ parseTime(item.completeTime) }}
                      </div>
                    </template>
                    <template slot="description">
                      <div class="step-content step_content_style">
                        <div class="step-content-left">
                          <div>办理人：{{ item.creatUserName }}</div>
                          <div>办理部门：{{ item.creatDeptName }}</div>
                          <div>办理意见：{{ item.nodeOpinion }}</div>
                        </div>
                        <div class="step-content-right">
                          <img
                            :src="case4"
                            alt=""
                            @click="imageDialog(item.attachments)"
                          />
                        </div>
                      </div>
                    </template>
                  </el-step>
                </el-steps>
              </div>
            </div> -->
          </el-col>
        </el-row>
      </el-form>
      <!-- 底部案件处理按钮 -->
      <div class="bottomBtn">
        <el-button
          type="primary"
          v-if="this.$route.params.path == '/waitDispatchOrder/index'"
          @click="caseRegister(0)"
          >案件登记</el-button
        >
        <el-button
          type="warning"
          v-if="this.$route.params.path == '/waitDispatchOrder/index'"
          @click="caseRegister(1)"
          >案件保存</el-button
        >
        <!-- <el-button type="primary" class="supervise" @click="supervise" v-else
          >督办</el-button
        > -->
        <div class="bottom-btn-panel flex-end-center" v-if="buttonDisable">
          <!-- 核实派遣，核实反馈，案件派发，处置反馈，核查派遣，核查反馈，案件回访，案件结案，节点延期，案件延期，案件回退 -->
          <div v-if="form.nodeNowCode === '1001'">
            <!-- 按钮提示 -->
            <el-button
              type="primary"
              class="details_preservation"
              @click="edit"
            >
              <span v-if="isDetails">编辑</span>
              <span v-else-if="!isDetails" v-preventDbClick>保存</span>
            </el-button>
            <el-button
              class="operation-btn red mr-10"
              @click="handleShowDispatch"
            >
              案件派发
            </el-button>
            <el-button
              class="operation-btn yellow mr-10"
              @click="examine(1)"
              v-preventDbClick
            >
              核实派遣
            </el-button>
            <el-button
              class="operation-btn yellow mr-10"
              @click="examine(3)"
              v-preventDbClick
            >
              处置反馈
            </el-button>
            <el-button
              class="operation-btn yellow mr-10"
              @click="examine(11)"
              v-preventDbClick
            >
              案件结案
            </el-button>
            <el-button
              class="operation-btn yellow mr-10"
              @click="examine(12)"
              v-preventDbClick
            >
              修改标签集
            </el-button>
          </div>

          <div v-else-if="form.nodeNowCode === '1003'">
            <el-button
              class="operation-btn yellow mr-10"
              @click="examine(2)"
              v-preventDbClick
            >
              核实反馈
            </el-button>
          </div>

          <div v-else-if="form.nodeNowCode === '205'">
            <el-button
              class="operation-btn yellow mr-10"
              @click="examine(3)"
              v-preventDbClick
            >
              处置反馈
            </el-button>
          </div>

          <div
            v-else-if="
              form.nodeNowCode === '200' || form.nodeNowCode === '1004'
            "
          >
            <el-button
              class="operation-btn yellow mr-10"
              @click="examine(3)"
              v-preventDbClick
            >
              处置反馈
            </el-button>
            <el-button
              class="operation-btn yellow mr-10"
              @click="examine(6)"
              v-preventDbClick
            >
              处置派遣
            </el-button>
            <el-button
              class="operation-btn yellow mr-10"
              @click="examine(1)"
              v-preventDbClick
            >
              核实派遣
            </el-button>
            <el-button class="operation-btn red mr-10" @click="caseTransfer">
              案件转派
            </el-button>
            <el-button
              class="operation-btn yellow mr-10"
              @click="examine(8)"
              v-preventDbClick
              >案件延期</el-button
            >
            <el-button
              class="operation-btn yellow mr-10"
              @click="examine(9)"
              v-preventDbClick
              >案件回退</el-button
            >
          </div>

          <div v-else-if="form.nodeNowCode === '1002'">
            <el-button
              class="operation-btn yellow mr-10"
              @click="examine(4)"
              v-preventDbClick
            >
              核查派遣
            </el-button>
            <el-button
              class="operation-btn yellow mr-10"
              @click="examine(11)"
              v-preventDbClick
            >
              案件结案
            </el-button>
            <el-button
              class="operation-btn yellow mr-10"
              @click="examine(12)"
              v-preventDbClick
            >
              修改标签集
            </el-button>
            <el-button
              class="operation-btn red mr-10"
              @click="handleShowDispatch"
            >
              案件派发
            </el-button>
          </div>

          <div v-else-if="form.nodeNowCode === '302'">
            <el-button
              class="operation-btn yellow mr-10"
              @click="examine(5)"
              v-preventDbClick
            >
              核查反馈
            </el-button>
          </div>

          <div v-else-if="form.nodeNowCode === '303'">
            <el-button
              class="operation-btn yellow mr-10"
              @click="examine(7)"
              v-preventDbClick
            >
              案件回访
            </el-button>
          </div>

          <div v-else-if="form.nodeNowCode === '1005'">
            <el-button
              class="operation-btn yellow mr-10"
              @click="examine(10)"
              v-preventDbClick
            >
              处置反馈审核
            </el-button>
          </div>
        </div>
      </div>
    </div>

    <el-dialog :visible.sync="dialogVisibles">
      <img width="100%" :src="dialogImageUrl" alt="" />
    </el-dialog>

    <dispatchDialog2
      :dialogVisible="dispatchDialogVisible"
      @closeDialog="dispatchDialogVisible = false"
      :caseCode="caseCode"
    />

    <!-- 督办 -->
    <SuperviseDialog
      :dialogVisible="SuperviseDialog"
      @closeDialog="SuperviseDialog = false"
      :caseCode="caseCode"
    />

    <dispatchDialog3
      :dialogVisible="dispatchDialogVisible3"
      @closeDialog="dispatchDialogVisible3 = false"
      :caseCode="caseCode"
    />

    <HistoryDialog
      :dialogVisible="dispatchDialogVisible1"
      @closeDialog="dispatchDialogVisible1 = false"
      :toSonData="historyWorkArr"
    />

    <ExamineDialog
      :dialog-visible="examineDialogVisible"
      :title="dialogTitle"
      :case-code="caseCode"
      :status="status"
      :caseId="caseId"
      @closeDialog="closeExaminDialog"
      @refreshPage="refreshPage"
    />

    <!-- 展示图片的弹窗 -->
    <ImageDialog
      :dialogVisible="dispatchImageDialogVisible"
      @closeDialog="dispatchImageDialogVisible = false"
      :imageDate="imageData"
    />

    <!-- 权责清单弹窗 -->
    <ThreeTypeDialog
      :dialogVisible="ThreeTypeDialogVisible"
      @closeDialog="ThreeTypeDialogVisible = false"
      @threeTypeMsg="threeTypeMsg"
    />

    <!-- 标签集弹窗 -->
    <LablesDialog
      :dialogVisible="LablesDialogDialogVisible"
      @closeDialog="LablesDialogDialogVisible = false"
      @caseLableMsg="caseLableMsg"
    />

    <!-- 添加附件弹窗 -->
    <AddEnclosureDialog
      :dialogVisible="AddEnclosureDialogDialogVisible"
      @closeDialog="AddEnclosureDialogDialogVisible = false"
      @addFile="addFile"
    />
  </div>
</template>

<script>
import case1 from "@/assets/images/case/case1.png";
import case2 from "@/assets/images/case/case2.png";
import case3 from "@/assets/images/case/case3.png";
import case4 from "@/assets/images/case/case4.png";
import ImageDialog from "./../casedeal/components/imageDialog";
import HistoryDialog from "./../casedeal/components/historyDialog";
import SearchPanel from "@/components/SearchPanel";
import Pagination from "@/components/Pagination";
import CaseCardItem from "@/components/CaseCardItem";
import DispatchDialog2 from "./../casedeal/components/dispatchDialog2";
import DispatchDialog3 from "./../casedeal/components/dispatchDialog3";
import SuperviseDialog from "./../casedeal/components/superviseDialog";
import ExamineDialog from "./../casedeal/components/examineDialog";
import ThreeTypeDialog from "@/views/casedeal/components/threeTypeDialog";
import AddEnclosureDialog from "@/views/casedeal/components/addEnclosureDialog";
import UploadFile from "@/components/UploadFile";
import LablesDialog from "@/views/casedeal/components/lablesDialog";
import {
  caseMessage,
  caseSimilar,
  modifyCaseMsg,
  report,
  sourceType,
  region,
  categoryType,
  category,
  historyWork,
  analysis,
  getMapMsg,
  getAddressMsg,
  queryCaseLiseDatails,
  modifyCase,
  getLabelList,
} from "@/api/case.js";
import { wfmTaskHistory } from "@/api/wfm/wfm.js";
import { parseTime } from "@/utils/index";
import { staticImgUrl } from "@/url.js";

import BMap from "BMap";
export default {
  // name: "CaseDetail",
  components: {
    SearchPanel,
    Pagination,
    CaseCardItem,
    DispatchDialog2,
    ExamineDialog,
    ImageDialog,
    DispatchDialog3,
    HistoryDialog,
    LablesDialog,
    SuperviseDialog,
    ThreeTypeDialog,
    UploadFile,
    AddEnclosureDialog,
  },
  computed: {
    isShowTools() {
      return this.$route.meta.tools;
    },
  },
  data() {
    return {
      // 验证规则
      rules: {
        reportTel: [
          { required: true, message: "请输入来电号码", trigger: "blur" },
          { min: 11, max: 11, message: "长度应为 11 个字符", trigger: "blur" },
        ],
        reportName: [
          { required: true, message: "请输入姓名", trigger: "blur" },
          { min: 2, max: 5, message: "长度在 2 到 5 个字符", trigger: "blur" },
        ],
        categoryCompleteName: [
          { required: true, message: "请选择权责清单", trigger: "blur" },
        ],
        reportGender: [
          {
            required: true,
            message: "请选择性别",
            trigger: "blur",
          },
        ],
        caseTypeMsg: [
          {
            required: true,
            message: "请选择案件类型",
            trigger: "change",
          },
        ],
        sourceName: [
          {
            required: true,
            message: "请选择来源类型",
            trigger: "change",
          },
        ],
        type: [
          {
            required: true,
            message: "请选择诉求类型",
            trigger: "change",
          },
        ],
        level: [
          {
            required: true,
            message: "请选择紧急级别",
            trigger: "change",
          },
        ],
        secrecy: [
          {
            required: true,
            message: "请选择否保密",
            trigger: "change",
          },
        ],
        industry: [
          {
            required: true,
            message: "请选择行业",
            trigger: "change",
          },
        ],
        majorCategories: [
          {
            required: true,
            message: "请选择大类",
            trigger: "change",
          },
        ],
        subclass: [
          {
            required: true,
            message: "请选择小类",
            trigger: "change",
          },
        ],
        addressDetailedStandard: [
          { required: true, message: "请填写位置", trigger: "blur" },
        ],
        title: [{ required: true, message: "请填写工单标题", trigger: "blur" }],
        content: [
          { required: true, message: "请填写诉求内容", trigger: "blur" },
        ],
      },
      case1,
      case2,
      case3,
      case4,
      tableLoading: false,
      islabelsDisabled: false, // 标签集禁用输入框
      examineDialogVisible: false,
      AddEnclosureDialogDialogVisible: false,
      dispatchDialogVisible: false,
      dispatchDialogVisible1: false,
      dispatchDialogVisible3: false,
      dispatchImageDialogVisible: false,
      ThreeTypeDialogVisible: false,
      dispatchDialogVisible1: false,
      LablesDialogDialogVisible: false,
      dialogVisibles: false,
      dialogImageUrl: "",
      SuperviseDialog: false, //督办
      isShow: true,
      // height: "400px",
      isdisabled: false, //判断详情是否可编辑
      // isPreservation: false, //编辑按钮是否显示
      isDetails: false, //保存按钮是否显示

      imageData: [],
      fileArr: [],
      imageDataArr: [],
      labelListArr: [],

      //   诉求类型下拉框
      appealTypeArr: [],

      //   来源类型下拉框
      sourceTypeArr: [],

      //   来源类型下拉框
      sourceTypeArr: [],

      //   是否保密下拉框
      secrecyArr: [
        {
          type: "是",
          id: 1,
        },
        {
          type: "否",
          id: 0,
        },
      ],

      //   区 市 县
      addressCityArr: [],

      // 街道、乡镇
      addressStreetArr: [],

      // 社区、村
      addressDetailedUserArr: [],

      //   行业
      industryArr: [],

      //   大类
      majorCategoriesArr: [],

      //小类
      subclassArr: [],

      //   历史工单
      historyWorkArr: [],

      form: {
        attachments: [],
      },
      tableData: [],
      taskHistoryList: [],
      map: "",
      mapZoom: 14,
      query: {
        categoryDcaCode: "",
        categorySubCode: "",
        categorySupCode: "",
        dimension: "",
        longitude: "",
        type: "",
      },
      caseCode: "",
      dialogType: "",
      // 性别
      genderArr: [
        { value: 1, label: "女" },
        { value: 0, label: "男" },
      ],
      levelArr: [
        { id: 0, value: "普通" },
        { id: 1, value: "紧急" },
        { id: 2, value: "特急" },
      ],
      dialogTitle: "",
      status: 0,
      buttonDisable: true,
      caseId: null,
      planCompletionTime: null, //预计完成时间
    };
  },
  created() {
    // 查询案件详情信息
    this.getCaseMsg(this.$route.params.caseCode);

    //  获取诉求信息
    this.getAppealType();

    // 获取来源信息
    this.getSourceType();

    // 获取区县
    this.getRegion();

    // 获取行业
    this.getIndustry();

    if (!this.$route.params.isdisabled) {
      this.isDetails = true;
    }

    this.$bus.$on("caseCode", () => {
      this.getCaseMsg(this.$route.params.caseCode);
    });
  },
  mounted() {
    this.initData();
    // this.initMap();
    this.InitializeMap();
    // this.locationPosition();
    this.getAllLabelList();
  },

  watch: {
    // 监听地址的变化
    "form.addressDetailedStandard": {
      handler(newVal, oldVal) {
        // this.locationPosition();
      },
      deep: true,
    },
  },

  methods: {
    parseTime,
    handleShowDispatch() {
      this.dispatchDialogVisible = true;
      let obj = {
        categoryCode: this.form.categoryCode,
        planCompletionTime: this.planCompletionTime,
      };
      this.$bus.$emit("categoryCode", obj);
    },

    // 选择标签集
    changeCaseLable() {
      this.LablesDialogDialogVisible = true;
    },

    // 删除文件
    delFile(val) {
      this.$confirm("确定删除当前文件吗?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          this.$message({
            type: "success",
            message: "删除成功!",
          });
          this.fileArr.splice(val, 1);
        })
        .catch(() => {
          this.$message({
            type: "warning",
            message: "已取消删除",
          });
        });
    },

    // 删除图片
    delImg(val) {
      this.$confirm("确定删除当前图片吗?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          this.$message({
            type: "success",
            message: "删除成功!",
          });
          this.imageDataArr.splice(val, 1);
        })
        .catch(() => {
          this.$message({
            type: "warning",
            message: "已取消删除",
          });
        });
    },

    // 添加附件
    addFile(val) {
      val.forEach((item) => {
        if (
          item.url.includes(".png") ||
          item.url.includes(".jpg") ||
          item.url.includes(".jpeg")
        ) {
          // 图片
          this.imageDataArr.push({
            url:
              item.path.indexOf("http") == 0
                ? item.path
                : staticImgUrl + item.path,
            // url: staticImgUrl + item.path,
            name: item.name,
            path: item.path,
          });
          // this.imageDate.forEach((item) => {});
        } else {
          // 文件
          this.fileArr.push({
            name: item.name,
            // url: staticImgUrl + item.path,
            url:
              item.path.indexOf("http") == 0
                ? item.path
                : staticImgUrl + item.path,
            path: item.path,
          });
        }
      });
    },

    // 打开添加附件弹窗
    addEnclosure() {
      this.AddEnclosureDialogDialogVisible = true;
    },

    // 打开权责清单的弹窗
    openThreeType() {
      this.ThreeTypeDialogVisible = true;
      this.$bus.$emit("remarks", this.remarks);
    },

    // 显示地图位置
    sureBtn() {
      // 根据坐标获取地图网格信息
      // this.locationPosition();
      // if (document.querySelector("#suggestId").value == "") {
      //   this.$message.error("请输入要查询的地址");
      // } else {
      //   let dataMap = this.mapStr.lng + "," + this.mapStr.lat;
      //   getAddressMsg(dataMap)
      //     .then((result) => {
      //       let { data, code, msg } = result;
      //       if (data != null && data.length == 4) {
      //         this.changeRessStreet(data[3].id);
      //         this.changeDetailedUser(data[2].id);
      //         this.form.addressCity = data[3].name;
      //         this.form.addressStreet = data[2].name;
      //         this.form.addressCityName = data[3].id;
      //         this.form.addressStreetName = data[2].id;
      //         this.form.addressCommunityName = data[1].id;
      //         this.form.addressDetailedUser = data[1].name;
      //         this.form.areaId = data[0].id;
      //         this.form.addressDetailedStandard =
      //           document.querySelector("#suggestId").value;
      //       }
      //     })
      //     .catch({});
      // }
    },

    // 权责清单弹窗返回的值
    threeTypeMsg(val) {
      this.form.categoryCompleteName = val.categoryCompleteName;
      this.form.categoryCode = val.code;
    },

    // 标签集弹窗返回的值
    caseLableMsg(val) {
      this.form.labels = val;
    },

    // 查询所有的标签集
    getAllLabelList() {
      getLabelList()
        .then((result) => {
          let { code, rows } = result;
          if (code == 200) {
            this.labelListArr = rows;
          }
        })
        .catch();
    },

    // 图片放大
    imageBig(val) {
      this.dialogImageUrl = val;
      this.dialogVisibles = true;
    },

    // 案件登记 val = 0 --  保存 1
    caseRegister(val) {
      this.form.isSubmit = val;
      if (this.form.emergencyLevel == "普通") {
        this.form.emergencyLevel = 0;
      } else if (this.form.emergencyLevel == "紧急") {
        this.form.emergencyLevel = 1;
      } else if (this.form.emergencyLevel == "特急") {
        this.form.emergencyLevel = 2;
      }

      // 判断是否保密
      if (this.form.secrecy == "是" || this.form.secrecy == "保密") {
        this.form.secrecy = 1;
      } else if (this.form.secrecy == "否" || this.form.secrecy == "不保密") {
        this.form.secrecy = 0;
      }
      this.form.attachments = [...this.fileArr, ...this.imageDataArr];
      if (val == 0) {
        this.$refs.form.validate((valid) => {
          if (valid) {
            modifyCase(this.form).then((result) => {
              let { code } = result;
              if (code == 200) {
                this.$message.success("保存成功");
                this.$router.push("/sureDispatchOrder/index");
              }
            });
          } else {
            this.$message.error("请输入完整的工单");
            return false;
          }
        });
      } else if (val == 1) {
        modifyCase(this.form).then((result) => {
          let { code } = result;
          if (code == 200) {
            this.$message.success("保存成功");
          }
        });
      }
    },

    // 查询案件的详情信息
    getCaseMsg(caseCode) {
      queryCaseLiseDatails(caseCode).then((result) => {
        let { code, data, msg } = result;
        console.log(data);
        if (code == 200) {
          // this.locationPosition();
          var dataMap = data.longitude + "," + data.dimension;
          getAddressMsg(dataMap)
            .then((result) => {
              let { data, code, msg } = result;
              console.log(data)
              if (data != null && data.length == 4) {
                this.form.addressCityName = data[3].name;
                this.form.addressStreetName = data[2].name;
                this.form.addressCommunityName = data[1].name;
                this.form.addressCommunityCode = data[1].name;
                // self.form.addressDetailedUser = address;
              }
            })
            .catch({});
          var point = new BMap.Point(data.longitude, data.dimension);
          var gc = new BMap.Geocoder();
          var that = this;
          gc.getLocation(point, function (rs) {
            console.log(rs);
            that.form.addressDetailedStandard = rs.address;
          });
          this.map.clearOverlays();
          this.map.centerAndZoom(
            new BMap.Point(data.longitude, data.dimension),
            16
          );
          this.map.addOverlay(
            new BMap.Marker(new BMap.Point(data.longitude, data.dimension))
          );
          this.planCompletionTime = data.planCompletionTime;
          if (data.secrecy == 1) {
            data.secrecy = "保密";
          } else if (data.secrecy == 0) {
            data.secrecy = "不保密";
          }
          this.form = data;

          this.fileArr = [];
          this.imageDataArr = [];
          // let imgUrl = 'http://192.168.23.121:8085'
          if (this.form.attachments.length > 0) {
            this.form.attachments.forEach((item) => {
              if (
                item.url.includes(".png") ||
                item.url.includes(".jpg") ||
                item.url.includes(".jpeg")
              ) {
                // 图片
                this.imageDataArr.push({
                  url:
                    item.path.indexOf("http") == 0
                      ? item.path
                      : staticImgUrl + item.path,
                  // url: staticImgUrl + item.path,
                  name: item.name,
                  path: item.path,
                });
                // this.imageDate.forEach((item) => {});
              } else {
                // 文件
                this.fileArr.push({
                  name: item.name,
                  // url: staticImgUrl + item.path,
                  url:
                    item.path.indexOf("http") == 0
                      ? item.path
                      : staticImgUrl + item.path,
                  path: item.path,
                });
              }
            });
          }

          // 将拿到的录音地址传值给tool组件
          if (data.caltUrl) {
            let obj = {
              videoUrl: data.caltUrl,
              type: true,
            };
            this.$bus.$emit("soundRecording", obj);
          }

          this.caseId = data.id;
          // if(!data.addressDetailedStandard){
          //   this.form.addressDetailedStandard=data.addressCityName
          // }

          this.handleSatisfaction = data.handleSatisfaction;
          this.form.categorySupCode = data.categorySupName;
          // form.addressCommunityName
          this.form.categorySubCode = data.categorySubName;
          // this.form.labels = data.labels;
          this.query.categoryDcaCode = data.categoryDcaCode;
          this.query.categorySubCode = data.categorySubCode;
          this.query.categorySupCode = data.categorySupCode;
          this.query.dimension = data.dimension;
          this.query.longitude = data.longitude;
          this.query.type = data.type;
          // this.getCaseSimilar();
        }
      });
    },

    // 修改标签集成功后，刷新页面
    refreshPage() {
      this.getCaseMsg(this.$route.params.caseCode);
    },

    // 编辑
    edit() {
      this.isdisabled = false;
      this.isDetails = !this.isDetails;
      if (this.isDetails) {
        this.isdisabled = true;
        if (this.form.secrecy == "不保密") {
          this.form.secrecy = 0;
        } else if (this.form.secrecy == "保密") {
          this.form.secrecy = 1;
        }
        modifyCaseMsg(this.form)
          .then((result) => {
            let { code, msg } = result;
            if (code == 200) {
              this.$message.success("保存成功");
              this.$router.push(this.$route.params.path);
              // this.getCaseMsg(localStorage.getItem('caseCode'));
            }
          })
          .catch(() => {});
      }
    },

    // 督办
    supervise() {
      this.SuperviseDialog = true;
      this.caseCode = this.$route.params.caseCode;
    },

    initMap() {
      // 创建Map实例
      this.map = new BMap.Map("map");
      // 初始化地图,设置中心点坐标和地图级别
      this.map.centerAndZoom(
        new BMap.Point(104.072242, 30.663711),
        this.mapZoom
      );
      // 设置地图显示的城市 此项是必须设置的
      this.map.setCurrentCity("成都");
      // 启用滚轮放大缩小，默认禁用
      this.map.enableScrollWheelZoom(true);
      // 启用地图惯性拖拽，默认禁用
      this.map.enableContinuousZoom(true);
    },

    // 历史工单
    historyWorkOrder() {
      if (!this.form.reportTel) {
        this.$message.error("请输入电话号码");
      } else {
        let flag = false;
        historyWork({
          reportTel: this.form.reportTel,
        })
          .then((result) => {
            let { rows, code } = result;
            if (code == 200) {
              this.historyWorkArr = rows;
              flag = true;
            }
            if (flag) this.dispatchDialogVisible1 = true;
          })
          .catch({});
      }
    },

    // 获取来源信息
    getSourceType() {
      categoryType({
        sysGroup: "caseSource",
      })
        .then((result) => {
          let { rows, code } = result;
          if (code == 200) this.sourceTypeArr = rows;
        })
        .catch({});
    },

    // 获取区县
    getRegion() {
      region({
        level: 1,
      })
        .then((result) => {
          let { rows, code } = result;
          if (code == 200) {
            this.addressCityArr = rows;
            this.changeRessStreet(rows[0].id);
          }
        })
        .catch({});
    },

    // 获取街道乡镇
    changeRessStreet(value) {
      region({
        parentCode: value,
      })
        .then((result) => {
          let { rows, code } = result;
          if (code == 200) this.addressStreetArr = rows;
        })
        .catch({});
    },

    // 获取社区、村
    changeDetailedUser(value) {
      region({
        parentCode: value,
      })
        .then((result) => {
          let { rows, code } = result;
          if (code == 200) this.addressDetailedUserArr = rows;
        })
        .catch({});
    },

    // 获取行业
    getIndustry() {
      sourceType({
        parentId: 0,
      })
        .then((result) => {
          let { rows, code } = result;
          if (code == 200) this.industryArr = rows;
        })
        .catch({});
    },

    // 获取大类
    changeMajorCategories(value) {
      sourceType({
        parentId: value,
      })
        .then((result) => {
          let { rows, code } = result;
          if (code == 200) this.majorCategoriesArr = rows;
        })
        .catch({});
    },

    // 获取小类
    changeSubclass(value) {
      sourceType({
        parentId: value,
      })
        .then((result) => {
          let { rows, code } = result;
          if (code == 200) this.subclassArr = rows;
        })
        .catch({});
    },

    // 获取诉求信息
    getAppealType() {
      categoryType({
        sysGroup: "caseType",
      })
        .then((result) => {
          let { rows, code } = result;
          if (code == 200) this.appealTypeArr = rows;
        })
        .catch({});
    },

    initData() {
      // this.buttonDisable = this.$route.params.buttonDisable;
      let user = JSON.parse(localStorage.getItem("isUserDataMsg"));
      // if (user.admin) {
      //   this.buttonDisable = true;
      // } else {
      //   if (this.form.nodeNowUserId != null) {
      //     if (this.form.nodeNowUserId == user.userId) {
      //       this.buttonDisable = true;
      //     } else {
      //       this.buttonDisable = false;
      //     }
      //   } else {
      //     let newarr = [];
      //     // console.log(user)
      //     // user.roles.forEach(item => {
      //     //   newarr.push(item.roleKey);
      //     // });
      //     if (
      //       newarr.includes("bm-jbr") ||
      //       newarr.includes("bm-ld") ||
      //       newarr.includes("zlzx-slry")
      //     ) {
      //       this.buttonDisable = true;
      //     } else {
      //       if (user.dept.deptId == this.form.nodeNowDeptId) {
      //         this.buttonDisable = true;
      //       } else {
      //         this.buttonDisable = false;
      //       }
      //     }
      //   }
      // }

      if (this.$route.params.caseCode) {
        this.caseCode = this.$route.params.caseCode;
        this.dialogType = this.$route.params.dialogType;
        // this.getCaseMsg(this.$route.params.caseCode);
        this.getTaskHistory(this.$route.params.caseCode);
        // this.getCaseSimilar();
      }
    },

    // 核实派遣
    caseTransfer() {
      this.dispatchDialogVisible3 = true;
      this.$bus.$emit("categoryCode", this.form.categoryCode);
    },

    // 获取定位信息
    locationPosition() {
      //创建地址解析器实例
      let myGeo = new BMap.Geocoder();
      // 将地址解析结果显示在地图上，并调整地图视野
      let self = this;
      myGeo.getPoint(this.form.addressDetailedStandard, function (point) {
        console.log(43434343);
        if (point) {
          self.latitudeAndLongitude = point;
          self.form.longitude = point.lng;
          self.form.dimension = point.lat;
          self.map.clearOverlays();
          self.map.centerAndZoom(point, 16);
          self.map.addOverlay(new BMap.Marker(point));
          let dataMap = point.lng + "," + point.lat;
          getAddressMsg(dataMap)
            .then((result) => {
              let { data, code, msg } = result;
              if (data != null && data.length == 4) {
                self.form.addressCityName = data[3].name;
                self.form.addressStreetName = data[2].name;
                self.form.addressCommunityName = data[1].name;
                self.form.addressCommunityCode = data[1].name;
                // self.form.addressDetailedUser = address;
              }
            })
            .catch({});
        } else {
          self.$message.error("您选择的地址没有解析到结果！");
        }
      });
    },

    handleDetail(data) {
      this.$router.push({
        name: "CaseDetail",
        params: { caseCode: data },
      });
    },

    // 查询疑似案件的信息
    getCaseSimilar() {
      this.tableLoading = true;
      caseSimilar(this.query)
        .then((result) => {
          let { rows, code, total } = result;
          if (code == 200) {
            this.tableLoading = false;
            this.tableData = rows;
          }
        })
        .catch(() => {
          this.tableLoading = false;
        });
    },

    // 图片的弹窗
    imageDialog(val) {
      this.dispatchImageDialogVisible = true;
      this.imageData = val;
    },

    // 查询案件流程的信息
    getTaskHistory(caseCode) {
      // wfmTaskHistory({ caseCode: caseCode })
      //   .then(result => {
      //     let { rows, code, total, msg } = result;
      //     if (code == 200) {
      //       // this.imageData=rows
      //       this.taskHistoryList = rows;
      //     }
      //   })
      //   .catch(() => {});
    },

    // 各种派遣
    examine(val) {
      this.examineDialogVisible = true;
      this.status = val;
      switch (val) {
        case 1:
          this.dialogTitle = "核实派遣";
          let obj = {
            categoryCode: this.form.categoryCode,
            planCompletionTime: this.planCompletionTime,
          };
          this.$bus.$emit("categoryCode", obj);
          break;
        case 2:
          this.dialogTitle = "核实反馈";
          break;
        case 3:
          this.dialogTitle = "处置反馈";
          break;
        case 4:
          this.dialogTitle = "核查派遣";
          break;
        case 5:
          this.dialogTitle = "核查反馈";
          break;
        case 6:
          this.dialogTitle = "处置派遣";
          break;
        case 7:
          this.dialogTitle = "案件回访";
          break;
        case 8:
          this.dialogTitle = "案件延期";
          break;
        case 9:
          this.dialogTitle = "案件回退";
          break;
        case 10:
          this.dialogTitle = "处置反馈审核";
          break;
        case 11:
          this.dialogTitle = "案件结案";
          break;
        case 12:
          this.dialogTitle = "修改标签集";
          break;
        default:
          break;
      }
    },

    closeExaminDialog() {
      this.examineDialogVisible = false;
      this.getCaseMsg(this.caseCode);
      this.getTaskHistory(this.caseCode);
    },

    // 初始化地图
    InitializeMap() {
      // 百度地图API功能
      this.map = new BMap.Map("map"); // 创建Map实例
      this.map.centerAndZoom("崇州市", 14); // 初始化地图,设置中心点坐标和地图级别
      //添加地图类型控件
      this.map.addControl(
        new BMap.MapTypeControl({
          mapTypes: [BMAP_NORMAL_MAP, BMAP_HYBRID_MAP],
        })
      );
      this.map.enableScrollWheelZoom(true);
      let self = this;
      this.map.addEventListener("click", function (e) {
        self.map.clearOverlays();
        const point = new BMap.Point(e.point.lng, e.point.lat);
        self.form.longitude = e.point.lng;
        self.form.dimension = e.point.lat;
        var marker = new BMap.Marker(point);
        self.map.addOverlay(marker);
        var geoc = new BMap.Geocoder();
        geoc.getLocation(point, function (rs) {
          // var addComp = rs.addressComponents;
          // self.form.addressDetailedUser =
          //   addComp.province +
          //   addComp.city +
          //   addComp.district +
          //   addComp.street +
          //   addComp.streetNumber;
          let dataMap = rs.point.lng + "," + rs.point.lat;
          console.log(dataMap);
          getAddressMsg(dataMap)
            .then((result) => {
              let { data, code, msg } = result;
              if (data != null && data.length == 4) {
                self.form.addressCityName = data[3].name;
                self.form.addressCityCode = data[3].id;
                self.form.addressStreetName = data[2].name;
                self.form.addressStreetCode = data[2].id;
                self.form.addressCommunityName = data[1].name;
                self.form.addressCommunityCode = data[1].id;
                console.log(rs.address);
                self.form.addressDetailedStandard = rs.address;
              }
            })
            .catch({});
        });
      });

      // this.buttonDisable = this.$route.params.buttonDisable;
      if (this.$route.params.caseCode) {
        this.caseCode = this.$route.params.caseCode;
        this.dialogType = this.$route.params.dialogType;
        // this.getCaseMsg(this.$route.params.caseCode);
        this.getTaskHistory(this.$route.params.caseCode);
        // this.getCaseSimilar();
      }
    },

    handleSearchPanelChange(flag) {
      this.isShow = flag;
    },
  },
};
</script>

<style lang="scss" scoped>
// 附件展示
.enclosureShow {
  margin-bottom: 10px;
  .enclosureShowSpan {
    margin-right: 15px;
    display: inline-block;
  }
}
// 修改输入框的长度
/deep/ .el-form-item__label {
  padding: 0 5px;
}
.steps-panel {
  // height: 440px;
  margin-top: 20px;
  .steps-title {
    height: 36px;
    background: url(../../assets/tools/title_bg.png) no-repeat center center;
    background-size: 100% 100%;
  }
  .steps-content {
    // height: 400px;
    padding: 10px 10px 5px 10px;
    overflow: auto;
    margin-bottom: 20px;
  }
}
.map-panel {
  #map {
    height: 400px;
    border: 1px solid #eee;
  }
}
.flow-describe {
  padding-bottom: 7px;
}
.step_content_style {
  // display: flex;
  // justify-content: space-between;
  position: relative;
}
.step_content_style .step-content-right {
  position: absolute;
  right: -1px;
  top: -8px;
  cursor: pointer;
}
.tital_image {
  margin-left: 10px;
}

.page_form_title {
  display: flex;
  justify-content: space-between;
}

/deep/.el-step__description {
  padding-right: 0;
}

// 顶部案件编号
.page_form_title {
  display: flex;
  justify-content: space-between;
}

/deep/.appealContent .el-form-item__label {
  height: 119px;
  display: flex;
  justify-content: center;
  align-items: center;
}
.caseNumber {
  font-weight: 700;
  .caseNumberSon {
    font-weight: 400;
    color: #626161;
  }
}
.bottomBtn {
  position: fixed;
  bottom: 10px;
  // right: 40px;
  background: transparent;

  // margin: 0 auto;
  // right: 0;
  left: 35%;
  display: flex;
  align-items: center;
  .flex-end-center {
    border: 0px;
    background: transparent;
  }
}
/deep/ .details_preservation {
  width: 90px;
  height: 36px;
  margin-right: 10px;
}

/deep/ .supervise {
  width: 90px;
  height: 36px;
  margin-right: 6px;
}

/deep/ .el-step__title {
  display: flex;
  align-items: center;
  .time {
    margin-left: 10px;
  }
}

/deep/ .el-steps--vertical {
  height: auto;
  .custom-steps .step-content {
    padding: 0px 6px;
  }
}

/deep/ .reportTel .el-input__inner {
  padding: 0 5px;
}

// 图片展示部分
.imgBox {
  margin-top: 20px;
  .showImage {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    .showImageItem {
      height: 145px;
      width: 24%;
      margin-right: 1.3%;
      margin-bottom: 20px;
      position: relative;
      cursor: pointer;
      .showImg {
        width: 100%;
        height: 100%;
      }
      .imgIcon {
        position: absolute;
        top: 3px;
        right: 3px;
        display: none;
        color: #fff;
        background: #f39735;
        font-size: 12px;
        width: 32px;
        height: 16px;
        text-align: center;
        line-height: 16px;
        border-radius: 4px;
      }
      .showName {
        width: 100%;
        height: 26px;
        background: #000000;
        opacity: 0.4;
        position: absolute;
        bottom: 0;
        display: flex;
        justify-content: center;
        align-items: center;
        font-size: 14px;
        font-family: Source Han Sans CN;
        font-weight: bold;
        color: #ffffff;
      }
    }
    .showImageItem:hover .imgIcon {
      display: block;
    }
  }
}

.showImage .showImageItem:nth-child(4n) {
  margin-right: 0px;
}

// 文件下载
.fileDownload {
  display: flex;
  align-items: center;
  height: 80px;
  .dot {
    width: 12px;
    height: 12px;
    background: #138aef;
    border-radius: 50%;
    margin-right: 7px;
  }
  .imageWords {
    font-size: 18px;
    font-family: Source Han Sans CN;
    font-weight: 400;
    color: #545455;
  }
  .fileNameBox {
    position: relative;
    cursor: pointer;
    display: flex;
    .fileName {
      height: 38px;
      background: linear-gradient(256deg, #1189ef, #5baff7);
      box-shadow: 0px 4px 9px 1px rgba(43, 153, 255, 0.33);
      border-radius: 4px;
      font-size: 16px;
      font-family: Source Han Sans CN;
      font-weight: bold;
      color: #ffffff;
      margin-left: 15px;
      display: flex;
      align-items: center;
      justify-content: center;
      width: 128px;
    }
    .fileIcon {
      position: absolute;
      top: 0;
      right: 3px;
      display: none;
      color: #fff;
    }
  }
  .fileNameBox:hover .fileIcon {
    display: block;
  }
}
</style>
